<template>
	<view class="container">
		<scroll-view scroll-y class="list" v-if="list.length != 0" @scrolltolower="loadMore">
			<view class="list-item" v-for="(item,index) in list" :key="item.order_sn">
				<view class="item-top">
					<p>订单号：{{item.order_sn}}</p>
					<span>已启动</span>
				</view>
				<view class="item-cen">
					<div class="cen-l">
						<p>{{item.name}}</p>
						<span>支付方式：{{item.pay_type}}</span>
						<span>地点：{{item.address}}</span>
					</div>
					<div class="cen-r">
						<p><span style="font-size: 12px;">￥</span>{{item.price}}</p>
					</div>
				</view>
				<view class="item-bot">
					<span>下单时间：{{item.createtime}}</span>
				</view>
			</view>
		</scroll-view>
		<view class="empty" v-else>
			<image src="/static/img/user/empty.png" mode=""></image>
			<p> ～没有更多消费记录～</p>
		</view>
	</view>
</template>

<script>
	import { getMyOrder } from '../../../api/api.js'
	export default {
		data() {
			return {
				list: [],
				total: '',
				current_page: 1,
				limit: 30,
				last_page: 1,
				timeType: ''
			}
		},
		onLoad(option) {
			if(option) {
				this.timeType = option.type;
			}
			this.getOrderList();
		},
		methods: {
			loadMore() {
				if (this.current_page > this.last_page) {
					uni.showToast({
						icon: 'none',
						title: '没有更多订单了'
					})
					return
				}
				getMyOrder({
					limit: this.limit,
					page: this.current_page,
					time_type: this.timeType
				}).then(res => {
					for (let i = 0; i < res.data.data.length; i++) {
						this.list.push(res.data.data[i])
					}
					this.total = res.data.total
					this.last_page = res.data.last_page
					this.current_page = res.data.current_page + 1
				})
			},
			getOrderList() {
				getMyOrder({
					limit: this.limit,
					page: this.current_page,
					time_type: this.timeType
				}).then(res => {
					this.list = res.data.data
					this.total = res.data.total
					this.last_page = res.data.last_page
					this.current_page = res.data.current_page + 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	background: #F7F7F7;
	.list {
		width: calc(100% - 60upx);
		padding: 0 30upx;
		// height: calc(100% - 300upx);
	
		.list-item {
			width: 100%;
			padding: 15px;
			margin: 15px auto;
			background: url('../../../static/img/user/orderbg.png') no-repeat center;
			background-size: 100% 100%;
			.item-top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-left: 10px;
				padding-right: 20px;
				padding-top: 6px;
				p{
					font-weight: 400;
					font-size: 12px;
					color: #666666;
				}
				span{
					font-weight: 500;
					font-size: 14px;
					color: #49A1FD;
				}
			}
			.item-cen{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 15px;
				.cen-l{
					margin-left: 80px;
					line-height: 26px;
					p{
						font-weight: 800;
						font-size: 14px;
						color: #413100;
						width: 200px;
					}
					span{
						display: block;
						font-weight: 400;
						font-size: 12px;
						color: #666666;
						width: 200px;
					}
				}
				.cen-r{
					font-weight: 400;
					font-size: 16px;
					color: #F95452;
				}
			}
			.item-bot{
				margin-top: 10px;
				span{
					font-weight: 400;
					font-size: 12px;
					color: #666666;
				}
			}
		}
	}
	.empty {
		text-align: center;
		image{
			width: 207px;
			height: 171px;
			margin: 20px auto;
		}
		p{
			font-weight: 400;
			font-size: 14px;
			color: #A7A5A5;
		}
	}
	@media screen and (min-width:800px){
		.list{
			height:calc(100vh - 100upx)!important;
		}
	}
}
</style>
